Element Colors & Palettes

Introduction

This tutorial will describe how to use palettes and specify element and series colors.

Using Palettes

There are several 50 color palettes available in the Palette enumeration. These can be defined in two ways.

Through Chart.PaletteName:

[C#]

Chart.PaletteName = dotnetCHARTING.Palette.Autumn;

[Visual Basic]

Chart.PaletteName = dotnetCHARTING.Palette.Autumn

This code will color each element based on a color in this palette.

Through Series.PaletteName

[C#]

mySeries.PaletteName = dotnetCHARTING.Palette.Autumn;

[Visual Basic]

mySeries.PaletteName = dotnetCHARTING.Palette.Autumn;

Using palette properties of series will color each element in that series a unique color of the specified palette.

NOTE: (Important) By specifying series palette, the legend box will display an entry for each element instead of entries for each series.

Sample: ColorByElements.aspx

Custom Palettes

Custom palettes can also be specified by supplying Chart.Palette or Series.Palette with an array of color objects. They will work in the same way as pre-defined palettes.

Coloring Individual Elements

To specify a color for an individual element it needs to be set through the Element.Color property. To specify a color for an entire series, set Series.DefaultElement.Color.

In order to specify individual series or element colors, a populated Series or SeriesCollection is required. Please see this kb for more information.

Samples

iterateElements.aspx
Color elements based on value.

InvisibleLegendEntry.aspx
Color elements based on value.

SeriesTypeFinancial

Financial series types like candlestick and bar use Element.SecondaryColor to fill elements that have a lower close price than open price.

SeriesType.Line

A 2D line color, thickness, and style can be controlled with the Series.Line property. Each element's color is shown in the element marker. In 3D mode each element section is colored with an elements color.

Smart Palette

The SmartPalette object allows you to create a standard color scheme for different charts that show related data. It does this by establishing a list of series or element names and the colors they should use. Fortunately, it does not require you to manually define all these name color pairs.

Working with the SmartPalette object

To create a smart palette that any charts can use, a populated SeriesCollection is required. Then a palette enumeration member or array of colors can be used to generate the SmartPalette based on the names of series in a series collection or element names in a series series. When the SmartPalette object is created it can be saved as XML and loaded by any chart with access to the xml file.

Manually Defining a SmartPalette

The code below demonstrates manually populating a smart palette object.

[C#]
SmartPalette sp = new SmartPalette();
sp.Add("Series 1", Color.Red);
sp.Add("Series 2", Color.Blue);

[Visual Basic]
Dim sp As New SmartPalette()
sp.Add("Series 1", Color.Red)
sp.Add("Series 2", Color.Blue)

Automatically Generating a SmartPalette

This code will generate a smart palette based on the colors specified by the Palette.One enumeration and match them with element names within the mySeries series object.

[C#]
SmartPalette sp = mySeries.GetSmartPalette(Palette.One);

[Visual Basic]
Dim sp As SmartPalette = mySeries.GetSmartPalette(Palette.One)

Saving the SmartPalette

Now that the SmartPalette object is generated and ready to use, it can be used by all charts related to this information. In order to use this object in other web pages it must be saved as xml. The following code demonstrates this.

[C#]
sp.SaveState("ClientSmartPalette.xml");

[Visual Basic]
sp.SaveState("ClientSmartPalette.xml")

Sample: SmartPaletteSaving.aspx

At this point, everything is setup for charts that show clients to use the same colors for each client no matter what page is showing the chart.

Loading the SmartPalette

The following code initializes an instance of the SmartPalette object using the information stored in ClientSmartPalette.xml.

[C#]
SmartPalette sp = new SmartPalette("ClientSmartPalette.xml");

[Visual Basic]
Dim sp As New SmartPalette("ClientSmartPalette.xml")

Sample: SmartPaletteLoading.aspx SmartPaletteSaving.aspx

Applying the SmartPalette

There are a couple ways the smart palette can be used. One way is to specify the SmartPalette for the whole chart. In this case, any element or series that matches a SmartPalette entry will inherit the associated color.

[C#]
Chart.SmartPalette = sp;

[Visual Basic]
Chart.SmartPalette = sp

The other option allows narrowing the use of the smartPalette to a chart area by means of specifying the smartPalette for the chart area's seriesCollection.

[C#]
ChartArea ca = new ChartArea();
ca.SeriesCollection.SmartPalette = sp;
Chart.ExtraChartAreas.Add(ca);

[Visual Basic]
Dim ca As New ChartArea()
ca.SeriesCollection.SmartPalette = sp
Chart.ExtraChartAreas.Add(ca)

SmartColor objects

The SmartColor object provides a feature that sets colors of elements based on a condition. For example, if elements on a chart that are below 0 must be red, this object will provide the functionality to do this automatically. The following code snippet demonstrates how this can be achieved:

[C#]

SmartColor scol = new SmartColor(Color.Red,new ScaleRange(-1000,0),ElementValue.YValue);
Chart.SmartPalette.Add(scol);

[Visual Basic]

Dim scol As new SmartColor(Color.Red,new ScaleRange(-1000,0),ElementValue.YValue);
Chart.SmartPalette.Add(scol);

This object also provides a LegendEntry property which can be used to provide a reference in the legend to the color scheme of the chart. If tokens are used in the legend entry label text, they will be based on the specified scale range object.

The SmartColor object is used in conjunction with maps to provide thematic mapping functionality. For more information on thematic mapping see the Map Styling tutorial.

.netCHARTING v4.2 Documentation	Send comments on this topic.
Element Colors & Palettes